<template>
  <div class="MyCenter" v-show="isShowHtml">
    <div class="contentBox">
      <div class="top">
        <div class="header" v-if="!isWeixin">
          <i class="iconfont icon-fa-angle-right" @click="goBack"></i><span>逾期记录</span>
        </div>

        <div class="contHead">
            <p>含{{DelayList.total}}个逾期账单</p>
        </div>

      </div>
      <div class="contBody" :class="{'es':isWeixin}" v-if="this.DelayList.data.length>0">
        <ul  v-infinite-scroll="loadMore"
             infinite-scroll-distance="10" >
          <li v-for="(item,index) in DelayList.data">
            <p>{{item.created_at.slice(6,7)}}月账单应还<br/>
              <b>{{item.amount}}</b>
            </p>
            <p>
              <span>已逾期{{item.overdue_dats}}天</span>
            </p>
          </li>
        </ul>
        <loading v-if="isLoading"></loading>
      </div>

      <no-record class="es-record" :class="{'es':isWeixin}" v-if="DelayList.data.length===0"></no-record>

    </div>
    <div class="warn">已逾期30天，逾期信息将于2019年5月16日上报人行征信</div>
  </div>
</template>
<script>
  import NoRecord from './NoRecord'
  import loading from './../common/Loading'
  export default{
    name: 'delayList',
    data(){
      return{
        isShowHtml:false,
        isLoading:false,
        DelayList:{
          data:[],
          total:'',
          last_page:'1',
          current_page:'1'
        },
      }
    },
    components: {
      NoRecord,
      loading
    },
    created(){
      this.$indicator.open()
    },
    mounted(){
      this.$api.getUserOverdue().then((res)=>{
        this.DelayList = res.data;
        this.$indicator.close()
        this.isShowHtml = true
      }).catch(()=>{
        this.$indicator.close()
        this.isShowHtml = true
      })
    },
    methods:{
      goBack(){
        this.$router.go(-1);//返回上一层
      },
      loadMore() {
        if (this.DelayList.current_page<this.DelayList.last_page) {
          this.isLoading = true;
          this.$api.getUserOverdue({page:this.DelayList.current_page+1}).then((res)=>{
            this.isLoading = false;
            this.DelayList.current_page = res.data.current_page;
            this.DelayList.data=this.DelayList.data.concat(res.data.data);
          }).catch(()=>{
            this.isLoading = false;
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .MyCenter{
    position: relative;
    width: 100%;
    height: 100%;
    .es-record{
      height: calc(100% - 330px);
      &.es{
        height: calc(100% - 242px);
      }
    }
    .contentBox{
      width: 100%;
      height: 100%;
      .top{
        background:linear-gradient(90deg,rgba(244,35,28,1),rgba(254,86,35,1));
        .header{
          width: 100%;
          height: 88px;
          padding: 0 30px;
          text-align: center;
          color: #FFFFFF;
          overflow: hidden;
          span{
            font-size:38px;
            line-height: 88px;
            font-weight:400;
            margin: 0 auto;
          }
          i{
            font-size: 38px;
            line-height: 88px;
            margin: 3px 0 0 0;
            float: left;
          }
        }
        .contHead{
          width: 100%;
          height: 242px;
          text-align: center;
          p{
            font-size:60px;
            font-weight:bold;
            color:rgba(255,255,255,1);
            line-height:242px;
          }
        }
      }

      .contBody{
        background:rgba(255,255,255,1);
        padding:0 30px;
        margin: 30px 0 146px 0;
        height:calc(100% - 506px);
        overflow: auto;
        &.es{
          height:calc(100% - 418px);
        }
        ul{
          li{
            height: 146px;
            border-bottom: 1px solid #F2F2F2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:last-of-type{
              border-bottom: none;
            }
            p:nth-child(1){
              font-size:24px;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(153,153,153,1);
              vertical-align: bottom;
              text-align: center;
              b{
                font-size:40px;
                font-family:Arial-BoldMT;
                font-weight:bold;
                color:rgba(51,51,51,1);
                margin-top: 10px;
              }
            }
            p:nth-child(2){
              float: right;
              margin-top: 15px;
              span{
                font-size:30px;
                font-family:SourceHanSansCN-Regular;
                font-weight:400;
                color:rgba(231,31,24,1);
                margin-right: 15px;
                vertical-align: top;
              }
            }
          }
        }
      }
    }
    .warn{
      width: 100%;
      position: fixed;
      background: #fff;
      bottom: 0px;
      padding: 30px 0 54px 0;
      text-align: center;
      font-size:24px;
      line-height: 24px;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(243,152,0,1);
    }

  }
</style>
